<template>
    <div class="my-content">
        <div class="title flex-between flex-center" :class="timg=='1'?'small':'big'">
            <div>{{ title }}</div>
            <div class="btn flex-center" v-if="btn && btn.length > 0">
                <div class="item" :class="item.value == btnValue?'active':''" v-for="(item,index) in btn" :key="index" @click="handleBtn(item)"> {{ item.text }}</div>
            </div>
        </div>
        <div class="box" :style="{ height }">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: () => '',
        },
        timg: {
            type: String,
            default: () => '1',
        },
        head: {
            type: Array,
            default: () => [],
        },
        data: {
            type: Array,
            default: () => [],
        },
        height: {
            type: String,
            default: () => '',
        },
        btn: {
            type: Array,
            default: () => [],
        },
        btnValue: {
            type: String,
            default: () => 'year',
        },
    },
    methods: {
        handleBtn(data){
            this.$emit('change', data.value)
        },
    }
}
</script>

<style lang="less" scoped>
    .my-content{
        position: relative;
        margin-bottom: 32px;

        /* 隐藏滚动条（非 hover） */
        ::-webkit-scrollbar {
            width: 0px;
            background: transparent;
        }

        /* Hover 显示滚动条 */
        ::-webkit-scrollbar {
            width: 0px;
        }

        /* 滚动条轨道 */
        ::-webkit-scrollbar-track {
            background: transparent;
        }

        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            background-color: rgba(31, 198, 255, 0.32);
            border-radius: 6px;
        }

        &:hover{
            ::-webkit-scrollbar {
                width: 6px;
            }
        }


        .title{
            color: #fff;
            height: 50px;
            padding: 0 0 0 20px;
            font-weight: 400;
            font-size: 20px;
            line-height: 30px;
            &.small{
                background: url(@/assets/img/title_01.png) no-repeat;
                background-size: 100%;
            }
            &.big{
                background: url(@/assets/img/title_02.png) no-repeat;
                background-size: 100%;
            }
            .btn{
                .item{
                    width: 52px;
                    text-align: center;
                    margin-left: 10px;
                    cursor: pointer;
                    border-width: 1px 0px 1px 0px;
                    border-style: solid;
                    border-color: #136480;
                    background: rgba(24, 45, 98, 0.5);
                    font-weight: 200;
                    font-size: 14px;
                    &.active{
                        background: linear-gradient(180deg, rgba(31, 198, 255, 0.32) 0%, rgba(31, 198, 255, 0) 100%);
                        color: #1FC6FF;
                        border-top: 1px solid #1FC6FF;
                        border-bottom: 0 solid transparent;
                    }
                }
            }
        }
        .box{
            overflow-x: hidden;
            overflow-y: auto;
            padding: 14px 16px;
            box-sizing: border-box;
            background: url(@/assets/img/line_s.png) left top repeat-y, url(@/assets/img/line_h.png) left bottom repeat-x, url(@/assets/img/line_s.png) right top repeat-y;
        }
        
    }
</style>